<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Dictionary Lookup - Options</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
/**
      = Hello Vocabulary @2010 =
	version 0.2.10
http://code.google.com/p/hello-vocabulary/
******************************************************

Copyright (c) 2010 Mead, laiqinyi@gmail.com


@ MIT License:Licensing
http://www.opensource.org/licenses/mit-license.php
@ Creative Commons License
http://creativecommons.org/licenses/by/2.5/legalcode
**/
      //<![CDATA[
      // Helpers to store and access objects in local storage.
      Storage.prototype.setObject = function(key, value) {
        this.setItem(key, JSON.stringify(value));
      }
      Storage.prototype.getObject = function(key) {
        var value = this.getItem(key);
        if (value == null) {
          return null;
        } else {
          return JSON.parse(value);
        }
      }
      
      // Set the active option in the <select> named select_name to choice.
      function setSelection(select_name, choice) {
        var select = document.getElementById(select_name);
        for (var i in select.children) {
          var child = select.children[i];
          if (child.value == choice) {
            child.selected = 'true';
            break;
          }
        }
      }
      
      selects    = ['clickModifier', 'shortcutModifier', 'shortcutKey'];
      checkboxes = ['shortcutEnable', 'shortcutSelection', 'hideWithEscape',
                    'saveFrameSize', 'showExamples', 'showPOS', 'showLabels',
                    'showIPA', 'showAudio', 'showAudioLinks', 'showRelated',
                    'showSynonyms', 'showAntonyms', 'showLinks', 'showEtymology'];
      textboxes  = ['frameWidth', 'frameHeight', 'queryFormWidth'];
  
      // Restores state from localStorage.
      function restoreOptions() {
        // Set defaults.
        setSelection('clickModifier', 'Ctrl');
        setSelection('shortcutModifier', 'Ctrl');
        setSelection('shortcutKey', 'Q');
        document.getElementById('shortcutEnable').checked = true;
        document.getElementById('shortcutSelection').checked = false;
        document.getElementById('frameWidth').value = 550;
        document.getElementById('frameHeight').value = 250;
        document.getElementById('queryFormWidth').value = 250;
        document.getElementById('hideWithEscape').checked = true;
        document.getElementById('saveFrameSize').checked = true;
        document.getElementById('showExamples').checked = true;
        document.getElementById('showPOS').checked = false;
        document.getElementById('showLabels').checked = true;
        document.getElementById('showIPA').checked = true;
        document.getElementById('showAudio').checked = true;
        document.getElementById('showAudioLinks').checked = true;
        document.getElementById('showRelated').checked = false;
        document.getElementById('showSynonyms').checked = true;
        document.getElementById('showAntonyms').checked = false;
        document.getElementById('showLinks').checked = false;
        document.getElementById('showEtymology').checked = false;
      
        // Override defaults by saved settings.
        for (var i in selects) {
          var select = selects[i];
          var choice = localStorage.getObject(select);
          if (choice != null) setSelection(select, choice);
        }
        
        for (var i in checkboxes) {
          var checkbox = checkboxes[i];
          var checked = localStorage.getObject(checkbox);
          if (checked != null) document.getElementById(checkbox).checked = checked;
        }
        
        for (var i in textboxes) {
          var textbox = textboxes[i];
          var val = localStorage.getObject(textbox);
          if (val != null) document.getElementById(textbox).value = Math.round(val);
        }
        
        updateShortcutFields();
      }
      
      // Saves state to localStorage.
      function saveOptions() {
        for (var i in selects) {
          var select = selects[i];
          localStorage.setObject(select, document.getElementById(select).value);
        }
      
        for (var i in checkboxes) {
          var checkbox = checkboxes[i];
          localStorage.setObject(checkbox, document.getElementById(checkbox).checked);
        }
      
        for (var i in textboxes) {
          var textbox = textboxes[i];
          var value = parseInt(document.getElementById(textbox).value);
          if (value) localStorage.setObject(textbox, value);
        }
        
        // Fade in status message.
        var status = document.getElementById('saveStatusMessage');
        status.style.opacity = 1;
        setTimeout(function() {
          status.style.opacity = 0;
        }, 1500);
      }
      
      function updateShortcutFields() {
        checked = document.getElementById('shortcutEnable').checked;
        document.getElementById('shortcutModifier').disabled = !checked;
        document.getElementById('shortcutKey').disabled = !checked;
        document.getElementById('shortcutSelection').disabled = !checked;
      }
      //]]>
    </script>
    <style type="text/css">
      body {
        font-family: Arial, Tahoma, sans-serif;
        margin-top: 0px;
        padding-top: 0px;
      }
      h1 {
        margin-top: 0px;
        color: #F8F8FF;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 0px 10px 10px;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
        font-size: 150%;
        text-align: center;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      label {
        float: left;
        width: 20em;
        padding-right: 20px;
        text-align: right;
      }
      div.field {
        padding-top: 5px;
      }
      #container {
        margin: auto;
        width: 600px;
        margin-top: 0px;
        padding-top: 0px;
      }
      #saveStatusMessage {
        display: block;
        position: fixed;
        top: 45%;
        left: 0px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 15px 15px 0px;
        padding: 10px 20px;
        opacity: 0;
        -webkit-transition: opacity 1.5s ease;
      }
      fieldset {
        background: #F8F8FF;
        border: 1px #CCC solid;
        border-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      legend {
        background: #F8F8FF;
        border: 1px #CCC solid;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        color: #777;
        font-size: 110%;
      }
      input, select {
        margin-left: 0px;
      }
      input[type=text] {
        width: 2.25em;
      }
      input[type=button] {
        display: block;
        position: fixed;
        top: 45%;
        right: -2px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBB), to(#888));
        border: 1px grey solid;
        border-right: none;
        border-radius: 15px 0px 0px 15px;
        padding: 10px 20px;
        -webkit-transition: opacity 1.5s ease;
        
        cursor: pointer;
        font-size: 120%;
        font-weight: bold;
      }

      input[type=button]:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#777));
      }

      input[type=button]:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#888), to(#BBB));
      }
      
      .license {
        text-align: center;
      }
    </style>
  </head>
  <body onload="restoreOptions()">
    <div id="container">
      <h1>Hello Vocabulary</h1>
      <fieldset>
        <legend>General</legend>
        <div class="field">
          <label for="clickModifier">Mouse lookup modifier:</label>
          <select id="clickModifier">
            <option value="None">None</option>
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
          </select>
        </div>
        <div class="field">
          <label for="hideWithEscape">Hide popup with Esc:</label>
          <input type="checkbox" id="hideWithEscape" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Keyboard Shortcut</legend>
        <div class="field">
          <label for="shortcutEnable">Enable shortcut:</label>
          <input type="checkbox" id="shortcutEnable" onclick="updateShortcutFields()" />
        </div>
        <div class="field">
          <label for="shortcutModifier">Shortcut modifier:</label>
          <select id="shortcutModifier">
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
            <option value="Ctrl+Shift">Ctrl+Shift</option>
            <option value="Alt+Shift">Alt+Shift</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutKey">Shortcut key:</label>
          <select id="shortcutKey">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
            <option value="I">I</option>
            <option value="J">J</option>
            <option value="K">K</option>
            <option value="L">L</option>
            <option value="M">M</option>
            <option value="N">N</option>
            <option value="O">O</option>
            <option value="P">P</option>
            <option value="Q">Q</option>
            <option value="R">R</option>
            <option value="S">S</option>
            <option value="T">T</option>
            <option value="U">U</option>
            <option value="V">V</option>
            <option value="W">W</option>
            <option value="X">X</option>
            <option value="Y">Y</option>
            <option value="Z">Z</option>
            <option value="`">`</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutSelection">Shortcut looks up selection:</label>
          <input type="checkbox" id="shortcutSelection" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Content</legend>
        <div class="field">
          <label for="showExamples">Examples:</label>
          <input type="checkbox" id="showExamples" />
        </div>
        <div class="field">
          <label for="showEtymology">Etymology:</label>
          <input type="checkbox" id="showEtymology" />
        </div>
        <div class="field">
          <label for="showPOS">Part of speech labels:</label>
        </div>
        </fieldset>
      <fieldset>
        <legend>Sizing</legend>
        <div class="field">
          <label for="frameWidth">Popup width:</label>
          <input type="text" id="frameWidth" />
        </div>
        <div class="field">
          <label for="frameHeight">Popup height:</label>
          <input type="text" id="frameHeight" />
        </div>
        <div class="field">
          <label for="queryFormWidth">Manual query form width:</label>
          <input type="text" id="queryFormWidth" />
        </div>
        <div class="field">
          <label for="saveFrameSize">Remember size:</label>
          <input type="checkbox" id="saveFrameSize" />
        </div>
      </fieldset>
      <fieldset>
        <legend>License</legend>
        <div class="field license">
          See the Term of use from HelloCode.net
        </div>
      </fieldset>
      <input type="button" onclick="saveOptions()" value="Save" />
      <div id="saveStatusMessage">Options saved.</div>
    </div>
  </body>
</html>
    